<template>
    <div class="table">
        <div class="container">
            <el-row>
                <el-col :span="6">
                    <el-card class="left-card">
                      <org-tree-panel @nodeClick="handleNodeClick"></org-tree-panel>
                    </el-card>
                    </el-col>
                    <el-col :span="18">
                    <el-card class="right-card">
                        <div class="handle-box">
                            <el-button type="primary" size="mini" class="handle-del mr10" @click="add">新增</el-button>
                            <el-input v-model="keyword" size="mini"  placeholder="筛选名称" class="handle-input mr10"></el-input>
                            <el-button type="primary" size="mini"  icon="search" @click="query">筛选</el-button>
                        </div>
                        <el-table style="width:100%" :data="tableData.records"  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                            <el-table-column type="index" label="序号" align="center" width="50"/>
                                    
                                    <el-table-column prop="fdName" label="名称" sortable />
                                    <el-table-column prop="fdNo" label="编号" sortable />
                                    <el-table-column prop="fdParentName" label="所属部门" sortable width="150"/>
                                    <el-table-column prop="fdParentOrgName" label="所属机构" sortable width="150"/>
                                    <el-table-column prop="fdIsAvaliable" label="是否有效"  width="100">
                                        <template slot-scope="scope">
                                            <el-switch v-model="scope.row.fdIsAvaliable" :disabled="true"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
                            <el-table-column label="操作" width="250" align="center">
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini"  @click="handleView(scope.row)">查看</el-button>
                                    <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
                        </div>
                    </el-card>
                    </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {orgTree,list} from '@/components/mixins/form';
import orgTreePanel from '@/components/form/OrgTreePanel';
export default {
    name: 'sysOrgPostList',
    data() {
        return {
            editUrl:'/sys/org/sys_org_post/edit',
            viewUrl:'/sys/org/sys_org_post/view',
            listUrl:'/api/sys/org/sys_org_post/list',
            deleteUrl:'/api/sys/org/sys_org_post',
            treeDataUrl:'/api/sys/org/sys_org_element/treeData',
            orgType:'ORG|DEPT'
        }
    },
    mixins:[orgTree,list],
    components:{orgTreePanel}
}
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
